<script setup lang="ts">
import { ref } from "vue";

import * as tf from "@tensorflow/tfjs";

defineProps<{ msg: string }>();

const count = ref(0);

// 定义一个简单的模型
const model = tf.sequential();
model.add(tf.layers.dense({ units: 1, inputShape: [1] }));

// 编译模型
model.compile({ optimizer: "sgd", loss: "meanSquaredError" });

// 生成一些训练用的合成数据
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// 训练模型
model.fit(xs, ys, { epochs: 10 }).then(() => {
  // 使用模型进行预测
  model.predict(tf.tensor2d([5], [1, 1])).print();
});
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
